<template>
    <el-table v-loading="loading" center :data="examRecordList">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="考试批次" align="left" prop="batchName" width="200">
            <template #default="scope">
                <!--这里可以给span加个click用来点击筛选-->
                <span class="link">{{ scope.row.batchName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="考生账号" align="left" prop="userName" width="100">
        </el-table-column>
        <el-table-column label="考生名称" align="left" prop="nickName" width="100">
        </el-table-column>
        <el-table-column label="试卷" align="left" prop="paperName">
        </el-table-column>
        <el-table-column label="理论考核" align="center" prop="paperScore" width="120">
            <template #default="scope">
                <span v-if="scope.row.paperScore == '--'" style="color:#909399;">--</span>
                <span v-else-if="scope.row.paperScore < 60 || scope.row.paperScore == '不合格'"
                    :style="env.prod === VITE_APP_ENV ? 'color:#F56C6C' : ''"
                    @click="handleDetail(scope.row, 'paper')">{{
                        env.prod
                            === VITE_APP_ENV ? '不合格' : '' }}（{{ scope.row.paperScore }}分）</span>
                <span v-else style="color:#67C23A;" @click="handleDetail(scope.row, 'paper')">{{ scope.row.paperScore
                    }}</span>
            </template>
        </el-table-column>
        <el-table-column label="单项考核分数" align="center" width="600">
            <template #default="scope">
                <div class="column">
                    <div v-for="(item, index) in scope.row.singleList" :key="index">
                        <div class="column-title">{{ item.toolName }}</div>
                        <div class="column-item" @click="handleDetail(scope.row, item.toolType)">
                            <span v-if="item.score == '不合格'"
                                :class="env.prod === VITE_APP_ENV ? 'nopassitem nopassitem-bg nopassitem-color' : ''">{{
                                    item.score
                                }}</span>
                            <span v-if="item.score === null" class="defaultitem">--</span>
                            <span v-else
                                :class="env.prod === VITE_APP_ENV ? item.score >= 60 ? 'passitem passitem-bg passitem-color' : 'nopassitem nopassitem-bg nopassitem-color' : ''">{{
                                    item.score }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </el-table-column>

        <el-table-column label="接警平台模拟实操" align="center" prop="operationScore" width="100">
            <template #default="scope">
                <span v-if="scope.row.operationScore == '--'" style="color:#909399;">--</span>
                <span v-else-if="scope.row.operationScore < 60 || scope.row.operationScore == '不合格'"
                    :style="env.prod === VITE_APP_ENV ? 'color:#F56C6C' : ''">{{ env.prod === VITE_APP_ENV ? '不合格' : ''
                    }}</span>
                <span v-else style="color:#67C23A;">{{ scope.row.operationScore }}</span>
            </template>
        </el-table-column>
        <el-table-column label="总分" align="center" prop="totalScore" width="100" fixed="right">
            <template #default="scope">
                <!-- 总分大于600分才及格 -->
                <span v-if="scope.row.totalScore > 600" :style="env.prod === VITE_APP_ENV ? 'color:#67C23A;' : ''">{{
                    env.prod
                        === VITE_APP_ENV ?
                        '合格' : '' }}<br />（{{ scope.row.totalScore }}分）</span>
                <span v-else style="font-weight: bold;" :style="env.prod === VITE_APP_ENV ? 'color:#909399;' : ''">{{
                    env.prod
                        === VITE_APP_ENV ? '不合格' : '' }}（{{
                        scope.row.totalScore }}分）</span>
                <!-- <span v-else-if="scope.row.totalScore > 60" style="color:#67C23A;">合格<br/>（{{scope.row.totalScore}}分）</span> -->
            </template>
        </el-table-column>
        <!-- <el-table-column label="考生信息" align="left" prop="knowStr">
        </el-table-column> -->
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link style="color:#265DA4;" icon="Edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['system:notice:edit']">编辑</el-button>
            <el-button link style="color:#265DA4;" icon="Delete" @click="handleDelete(scope.row)"
              v-hasPermi="['system:notice:remove']">删除</el-button>
          </template>
        </el-table-column> -->
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getMockRecord" />
</template>

<script setup>
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import { getRecordList } from '@/api/exam/index.js'

const props = defineProps({
    recordType: {
        type: [Number, String, undefined],
        default: undefined
    }
})

const loading = ref(false)
const examRecordList = ref([])
const total = ref(0)

watchEffect(() => {
    const recordType = computed(() => props.recordType)
    if (recordType.value) {
        getMockRecord({ recordType: recordType.value })
    }
})
async function getMockRecord(params) {
    console.log("params", params)
    let res = await getRecordList({ ...params, userId: userStore.$state.id })
    examRecordList.value = res.rows
    total.value = res.total;
}

const VITE_APP_ENV = import.meta.env.VITE_APP_ENV
// scope.row.paperScore < 60 || scope.row.paperScore == '不合格
const env = {
    dev: "development",
    stage: "staging",
    prod: "production",
}

const data = reactive({
    queryParams: {
        pageSize: 10,
        pageNum: 1,
        batchInvigilator: "",
        examinationPaperId: '',
        roomId: ''
    }
});
const { queryParams } = toRefs(data);

defineExpose({
    getMockRecord
})
</script>
<style scoped lang="scss">
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: #265DA4 !important; //修改默认的背景色
}

.inputDeep {
    :deep(.el-input__inner) {
        width: 192px !important;
    }
}

.column {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .column-title {
        width: 190px;
        background-color: #f4f4f5;
        font-weight: bold;
        color: #515a6e;
        padding: 5px
    }

    .column-item {
        cursor: pointer;
        width: 190px;

        span {
            display: block;
        }

        .passitem {
            &.passitem {
                background-color: #f0f9eb;
            }

            &.passitem-color {
                color: #67C23A;
            }
        }

        .nopassitem {
            &.nopassitem-bg {
                background-color: #fef0f0;
            }

            &.nopassitem-color {
                color: #F56C6C;
            }
        }

        .defaultitem {
            background-color: #f4f4f5;
            color: #909399;
        }
    }
}
</style>